<template>
  <div class="first">
    <!-- 首页的导航栏 -->
    <van-nav-bar
      class="vanNavbar"
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickSearch"
    >
      <template #title>
        <span class="title">首页</span>
      </template>
      <template #left>
        <van-icon class="left" name="qr" size="26" />
      </template>
      <template #right>
        <van-icon class="right" name="search" size="26" />
      </template>
    </van-nav-bar>

    <van-tabs
      v-model="active"
      title-active-color="#e40137"
      swipeable
      @click="toDiffChannel"
      sticky
    >
      <!-- <van-tab title="推荐" name="0">推荐</van-tab> -->
      <van-tab v-for="item in list" :key="item.id" :title="item.name">
        <template #default>
          <div class="content" v-if="articleList.length !== 0">
            <van-pull-refresh
              v-model="isLoading"
              success-text="刷新成功"
              @refresh="onRefresh(item.id)"
            >
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad(item.id)"
              >
                <div
                  class="art_item"
                  v-for="(item, index) in articleList"
                  :key="index"
                >
                  <div
                    class="top_box"
                    :class="{ control_img: item.cover.images.length >= 3 }"
                  >
                    <div
                      class="title"
                      :class="{ nopic: item.cover.images.length === 0 }"
                    >
                      {{ item.title }}
                    </div>
                    <div
                      class="right_img"
                      v-if="item.cover.images.length === 1"
                    >
                      <img
                        v-if="item.cover.images.length === 1"
                        v-image="imgUrl"
                        alt=""
                        :src="item.cover.images[0]"
                      />
                    </div>
                    <div class="right_img" v-if="item.cover.images.length >= 3">
                      <img
                        v-for="(item2, index2) in item.cover.images"
                        :key="index2"
                        :src="item2"
                        v-image="imgUrl"
                        alt=""
                      />
                    </div>
                  </div>

                  <div class="bottom">
                    <div class="b1">{{ item.aut_name }}</div>
                    <div class="b2">{{ item.comm_count }}条评论</div>
                    <div class="b3">{{ item.pubdate }}</div>
                    <div class="b4">
                      <span @click="closeItem(item)">×</span>
                    </div>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
          <div class="content2" v-else>暂无内容</div>
        </template>
      </van-tab>
    </van-tabs>
    <van-popup class="van-popup-center" v-model="show">
      <van-cell-group v-if="complainNoShow">
        <van-cell title="不感兴趣" icon="location-o" @click="toRemove">
          <template #icon>
            <div class="iconfont">
              &#xe639;
            </div>
          </template>
        </van-cell>
        <van-cell title="反馈垃圾内容" @click="toComplain">
          <template #icon>
            <div class="iconfont">
              &#xe643;
            </div>
          </template>
          <template #default>
            <div class="go_complain">></div>
          </template>
        </van-cell>
        <van-cell title="拉黑作者" @click="toRemoveAuthot">
          <template #icon>
            <div class="iconfont">
              &#xe607;
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group v-else>
        <van-cell title="">
          <template #right-icon>
            <div class="iconfont" @click="closeComplainBox">&#xe605;</div>
          </template>
        </van-cell>
        <van-cell
          :title="item"
          v-for="(item, index) in complainList"
          :key="index"
          @click="toComplainReason(index)"
        >
        </van-cell>
      </van-cell-group>
    </van-popup>
    <van-popup
      v-model="chanelShow"
      class="van-popup-bottom"
      position="bottom"
      :style="{ height: '70%' }"
    >
      <div class="myChanel_box">
        <div class="header">
          <div class="my_chanel_text">我的频道</div>
          <div class="my_chanel_edit" @click="toEditChanel">{{ editText }}</div>
        </div>
        <div class="all_chanel">
          <div
            class="chanel_singel"
            v-for="(item3, index3) in myChannel"
            :key="index3"
            size="large"
            closeable
            @click="toClickChanel(item3.id)"
            color="#ffe1e1"
            text-color="#ad0000"
          >
            {{ item3.name }}
            <div
              class="error"
              v-if="editText === '完成' && item3.name !== '推荐'"
              @click="toRemoveChanel(item3.id, index3)"
            >
              x
            </div>
          </div>
          <div class="chanel_singel extra"></div>
          <div class="chanel_singel extra"></div>
          <div class="chanel_singel extra"></div>
        </div>
      </div>
      <!-- 下面的频道推荐 -->
      <div class="myChanel_box recommend_box">
        <div class="header">
          <div class="my_chanel_text">频道推荐</div>
        </div>
        <div class="all_chanel recommend_chanel">
          <div
            class="chanel_singel"
            v-for="(item4, index4) in recommendChanel"
            :key="index4"
            size="large"
            closeable
            color="#ffe1e1"
            text-color="#ad0000"
          >
            {{ item4.name }}
            <div
              class="success"
              v-if="editText === '完成'"
              @click="toAddChanel(item4)"
            >
              ↑
            </div>
          </div>
          <div class="chanel_singel extra"></div>
          <div class="chanel_singel extra"></div>
          <div class="chanel_singel extra"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  userChannels,
  vArticles,
  articleDislikes,
  userBlacklists,
  userChannelsTarget,
  vChannels,
  articleReports
} from '@/api/first.js'
export default {
  data () {
    return {
      active: 0,
      list: [],
      articleList: [],
      isLoading: false, // 是否处于下拉刷新中
      loading: false, // 是否处于上拉加载更多中
      finished: false, // 是否加载完毕
      show: false, // 控制弹出框
      currentId: 0, // 点击需要删除文章的id
      imgUrl: require('@/assets/logo.png'),
      currentIndex: 0, // 点击需要删除文章在数组中的下标
      authorId: 0, // 文章作者id
      chanelShow: false,
      editText: '编辑',
      channels: [],
      allChannels: [], // 全部频道列表
      complainNoShow: true,
      recommendChanel: [], // 推荐的频道列表
      myChannel: [], // 我的频道列表
      complainList: [
        '其他问题',
        '标题夸张',
        '低俗色情',
        '错别字多',
        '旧闻重复',
        '广告软文',
        '内容不实',
        '涉嫌违法犯罪',
        '侵权'
      ]
    }
  },
  created () {
    this.getChannel()
    this.toDiffChannel('0')
    this.getAllChannels()
  },
  mounted () {
    document.body.style.backgroundColor = '#f7f4f5'
  },
  beforeDestroy () {
    document.body.style.backgroundColor = ''
  },
  methods: {
    async getAllChannels () {
      const res = await vChannels()
      // console.log(res)
      this.allChannels = res.data.channels
    },
    async getChannel () {
      const res = await userChannels()
      // console.log(res)
      this.list = res.data.channels
      // console.log(this.myChannel)
      // console.log(this.list)
    },
    async toDiffChannel (id) {
      // console.log(111)
      // console.log(id)
      // console.log(Date.parse(new Date()))
      const res = await vArticles({
        channel_id: `${id}`,
        timestamp: new Date() - 0,
        with_top: 1
      })
      // console.log(res)
      this.articleList = res.data.results
      // console.log(this.articleList)
      // this.articleList.unshift(...res.data.results)
      this.isLoading = false
      // this.loading = false
    },
    // 点击删除按钮触发模态框
    closeItem (item, index) {
      // console.log(index)
      // console.log(item)
      this.currentId = item.art_id
      this.authorId = item.aut_id
      this.currentIndex = index
      this.show = true
      this.complainNoShow = true
    },
    // 模态框第一条：不喜欢某文章去删除
    async toRemove () {
      // console.log(this.currentId)
      // console.log(111)
      await articleDislikes({
        target: this.currentId
      })
      // console.log(res)
      this.$toast.success('已成功为您屏蔽')
      this.articleList.splice(this.currentIndex, 1)
      this.show = false
    },
    // 去拉黑作者
    async toRemoveAuthot () {
      await userBlacklists({
        target: this.authorId
      })
      // console.log(res)
      this.$toast.success('已成功为您成功拉黑')
      this.articleList.splice(this.currentIndex, 1)
      this.show = false
    },
    // 去投诉文章
    toComplain () {
      // 显示投诉模态框
      this.complainNoShow = false
    },
    // 反应投诉的原因
    async toComplainReason (index) {
      await articleReports({
        target: this.currentId,
        type: index
      })
      // console.log(res)
      this.$toast.success('已成功投诉')
      this.articleList.splice(this.currentIndex, 1)
      this.show = false
    },
    onRefresh (id) {
      this.toDiffChannel(id)
    },
    async onLoad (id) {
      const res = await vArticles({
        channel_id: `${id}`,
        timestamp: new Date() - 0,
        with_top: 1
      })
      // console.log(res)
      this.articleList.push(...res.data.results)
      this.loading = false
      // 本来要判断结束的。但是感觉这个接口无穷无尽，不需要结束
    },
    // 我的频道那里
    onClickLeft () {
      // console.log(111)
      this.myChannel = JSON.parse(JSON.stringify(this.list))
      this.chanelShow = true
      this.getDiffChanel()
      // console.log(arrId)
      // console.log(this.recommendChanel)
    },
    getDiffChanel () {
      const arrId = this.myChannel.map(item => {
        return item.id
      })
      this.recommendChanel = this.allChannels.filter((item, index) => {
        return !arrId.includes(item.id)
      })
    },
    // onClickSearch
    onClickSearch () {
      // console.log('nClickSearch')
      this.$router.push('/home/search')
    },
    // 点击编辑去编辑我的频道,点击完成之后就替换所有的频道列表
    async toEditChanel () {
      if (this.editText === '完成') {
        // console.log(this.list)
        // console.log(this.channels)
        this.channels = JSON.parse(JSON.stringify(this.myChannel))
        // console.log(this.channels)
        this.channels.splice(0, 1)
        this.channels.forEach((item, index, arr) => {
          delete item.name
          item.seq = index + 2
        })
        // console.log(this.channels)
        await userChannelsTarget({
          channels: this.channels
        })
        // console.log(res)
        this.getChannel()
        this.active = 0
        this.chanelShow = false
      }
      this.editText = this.editText === '编辑' ? '完成' : '编辑'
    },
    // 关闭投诉弹框
    closeComplainBox () {
      this.show = false
    },
    // 点击x去删除我的频道
    toRemoveChanel (id, index) {
      // console.log(id)
      // console.log(index)
      // console.log(name)
      // this.channels[this.channels.length].id = id
      // this.channels[this.channels.length].seq = index
      // this.recommendChanel = this.allChannels.filter((item, index, arr) => {
      //   return item.name.includes(name)
      // })
      // console.log(this.recommendChanel)
      // this.list.splice(index, 1)
      this.myChannel.splice(index, 1)
      this.getDiffChanel()
    },
    // 点击编辑的时候，可以点击下面的图表添加到上面去
    toAddChanel (item) {
      // console.log(item)
      this.myChannel.push(item)
      this.getDiffChanel()
    },
    toClickChanel (id) {
      // console.log(11)
      if (this.editText === '编辑') {
        const numArr = this.list.map((item, index) => {
          if (item.id === id) {
            return index
          } else {
            return ''
          }
        })
        const newIndex = numArr.join('')
        this.active = Number(newIndex)
        // console.log(this.active)
        // console.log(newIndex)
        // console.log(numArr)
        // console.log(this.list)
        this.toDiffChannel(id)
        this.chanelShow = false
      }

      // this.active = this.list.includes(id)
      // 晚上接着做
      // this.chanelShow = false
    }
  }
}
</script>

<style lang="less">
.first {
  .van-nav-bar {
    background-color: @color;
    .title {
      color: #fff;
    }
    .left {
      color: #fff;
    }
    .right {
      color: #fff;
    }
  }
  .van-tabs {
    .content {
      .art_item {
        padding: @p15;
        background-color: #fff;
        margin-top: 1px;
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        .top_box {
          flex: 1;
          display: flex;
          justify-content: space-between;
          .title {
            font-size: 16px;
            color: #3a4750;
          }
          .nopic {
            padding-bottom: 12px;
          }
          .right_img {
            height: 60px;
            margin-left: 8px;
            img {
              width: 90px;
              height: 60px;
              object-fit: contain;
            }
          }
        }
        .control_img {
          display: block;
          .right_img {
            display: flex;
            justify-content: space-between;
            margin: 8px 0;
            img {
              flex: 1;
              object-fit: contain;
            }
          }
        }

        .bottom {
          display: flex;
          font-size: 12px;
          color: #999;
          justify-content: flex-start;
          align-items: center;
          .b1,
          .b2 {
            margin-right: 8px;
          }
          .b4 {
            flex: 1;
            text-align: right;
            font-size: 20px;
          }
        }
      }
    }
    .content2 {
      padding: @p15;
      font-size: 20px;
      color: #999;
    }
  }
  .van-popup-center {
    width: 85%;
    background-color: transparent;
    .van-cell-group {
      border-radius: 20px;
      overflow: hidden;
      .iconfont {
        margin-right: 5px;
      }
      .van-cell__value {
        .go_complain {
          float: right;
          width: 45px;
          height: 25px;
          text-align: center;
          line-height: 25px;
          border-radius: 15px;
          border: 1px solid #999;
        }
      }
    }
  }
  .van-popup-bottom {
    .myChanel_box {
      padding: @p15;
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 6px;
        border-bottom: 1px solid #ccc;
        .my_chanel_text {
          font-size: 14px;
        }
        .my_chanel_edit {
          font-size: 12px;
          width: 50px;
          border-radius: 15px;
          height: 30px;
          border: 1px solid #ccc;
          text-align: center;
          line-height: 30px;
        }
      }
      .all_chanel {
        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        .chanel_singel {
          flex: 22%;
          height: 30px;
          border-radius: 15px;
          margin-right: 5px;
          margin-bottom: 5px;
          color: #666;
          border: 1px solid #999;
          font-size: 12px;
          text-align: center;
          line-height: 30px;
          position: relative;
        }
        .error {
          width: 17px;
          height: 17px;
          border-radius: 50%;
          position: absolute;
          text-align: center;
          line-height: 17px;
          color: #fff;
          background-color: @color;
          top: -5px;
          right: -6px;
        }
        .extra {
          height: 0;
          border: none;
        }
      }
    }
    .recommend_box {
      .recommend_chanel {
        .success {
          width: 17px;
          height: 17px;
          border-radius: 50%;
          position: absolute;
          text-align: center;
          line-height: 17px;
          color: #fff;
          background-color: yellowgreen;
          top: -5px;
          right: -6px;
        }
      }
    }
  }
}
</style>
